import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12   //导入控件  否则不识别Button
import My.Backend 1.0   //导入已注册的后端实例Backend
import Qt.labs.qmlmodels 1.0

/*
Window {//顶级窗口
    width: 640
    height: 480
    visible: true
    title: qsTr("Rectangle Example")
    Rectangle{//给矩形元素添加一个父矩形元素
        width: 100
        height: 100
        x:0
        y:0
        color: "pink"
        border.color:"black" //设置父矩形元素边框为黑色
        border.width:5   //设置父矩形元素边框宽度为5像素
        clip:true    //设置父矩形元素剪裁超出矩形边界的内容
        Rectangle{
            width: 200
            height:200
            x:10
            y:10
            color: "yellow" //填充颜色
            opacity: 1
            radius: 100
            antialiasing: true //启用锯齿，以获得更平滑的边缘效果
            //设置矩形元素的颜色渐变效果
            gradient: Gradient{
                orientation: Gradient.Horizontal   //水平方向渐变
                GradientStop{position:0.0; color:"#000000"}  //渐变起始位置为黑色
                GradientStop{position:1.0; color:"#ffffff"}  //渐变结束位置为白色
            }
            border.color: "red"  //设置矩形元素边框颜色为红色
            border.width: 5      //边框宽度5像素

        }
    }
}*/

Window {//顶级窗口
    width: 640
    height: 480
    visible: true
    title: qsTr("Rectangle Example")
    //顶级窗口下新增按钮
    Button {
        x:10
        y:10
        width:100
        height:50
        text:qsTr("backend")
        onClicked:{
            Backend.receive("Button 1 msg") //点击按钮给后端Backend发送消息
            console.log("Btn1 is clicked.");
        }
    }
    Button {
        x:120
        y:10
        width:100
        height:50
        text:qsTr("backend2")
        onClicked:{
            Backend2.receive("Button 2 msg") //点击按钮给后端Backend2发送消息
             console.log("Btn2 is clicked.");
        }
    }
    TextArea{ //新增文本区域 用来显示来自后端的消息
        id:textArea
        x:10
        y:70
        font.pointSize: 20
        placeholderText: qsTr("Msg Area")
        onTextChanged: {
                console.log("Message changed to:", text)
            }
    }
    //连接后端信号，接收后端的消息，将其显示到文本区域上

    Connections {
        target: Backend
        onMessage:{
            console.log("Backend msg:", msg);
            textArea.text = msg;
            console.log("Backend TextArea.text:", textArea.text);
        }
    }

    Connections {
        target: Backend2
        onMessage:{
            console.log("Backend2 msg:", msg);
            textArea.text = msg;
            console.log("Backend2 TextArea.text:", textArea.text);
        }
    }
    //至此完成，将消息从前端发送到后端。后端返回消息到前端并显示
}
